<template lang="jade">
  #login
    .top
      Logo
    main.main
      img.img( :src="src" )
      .login-area
        h3.title
          span 登录
          span.no-login
            | 没有帐号？
            router-link( to="/information/register" ) 立即注册
        .form
          input.name(
            ref='inputName',
            type="text",
            placeholder="请填写用户名或手机号",
            v-model:name='name',
            @keyup.enter="login"
          )
          input.password(
            ref='inputPS',
            type="password",
            placeholder="填写您的登录密码",
            v-model:password='password',
            @keyup.enter="login"
          )
          span.errLogin( v-if = 'errLogin')
            用户名或密码错误，请重新输入
          .auto-login
            .auto
              //- input( type="checkbox" id="auto" )
              //- label( for="auto" ) 自动登录
            router-link.forget-password( to="/information/pwd" ) 忘记密码?
          span.login-active( @click='login' ) 登 录
    Footer
</template>
<style lang="stylus" scoped>
  #login
    .top
      border-bottom 1px solid #F0F3F5
    .main
      display: flex
      background: #f0f3f5
      justify-content: center
      padding-top: 111px
      padding-bottom: 168px
      .img
        width: 633px
        height: auto
      .login-area
        background: #fff
        width: 383px
        padding: 28px 42px 46px
        box-sizing: border-box
        .title
          display: flex
          justify-content: space-between
          width: 100%
          padding-bottom: 10px
          border-bottom: 1px solid #E8E9F1
          span
            display: inline-block
            color: #0E113A
            font-size: 18px
          .no-login
            font-weight: normal
            font-size: 14px
            color: #676767
      .form
        padding-top: 30px
        .name
        .password
          display: block
          background-repeat: no-repeat
          background-position: 10px center
          padding-left: 40px
          width: 260px
          height: 40px
          border: 1px solid #C5C6D6
          color: #0E113A
          font-size: 14px
        .name
          background-image: url( '~assets/public/images/user.png' )
          margin-bottom: 20px
        .password
          background-image: url( '~assets/public/images/code.png' )
          margin-bottom: 15px
          color: #999
        .auto-login
          display: flex
          justify-content: space-between;
          margin-bottom: 28px
          label
            margin-left: 5px
            color: #9B9B9B
            font-size: 14px
          span
            color: #444B9C
            font-size: 14px
            cursor pointer
        .login-active
          background-color: #2D316C
          display: block
          width: 300px
          height: 50px;
          line-height: 50px
          border-radius: 5px
          text-align: center
          font-size: 16px
          color: #fff
          cursor pointer
        .errLogin
          font-size : 14px
          color: #f00 
</style>
<script>
import Logo from '../modules/Logo.vue';
import Footer from '../modules/Footer.vue';
import URLS from '@/const/urls';
import Login from 'components/login/login';

export default {
  name: 'index',
  mixins: [Login],
  components: {
    Logo,
    Footer
  }
};
</script>